<template>
    <el-card style="width:500px;margin:0 auto">
        <p class="p">
            申请您的第一个店铺
            <!-- <slot name="title">申请您的第一个店铺</slot> -->
        </p>
        <hr>
        <el-form :model="form" label-width="100px" :inline="false" style="width:400px;">
            <el-form-item label="商户名称：">
                <el-input v-model="form.StoreName"></el-input>
            </el-form-item>
            <el-form-item label="所在地：">
                <el-cascader v-model="form.AddressArr" :options="addressTreeList.value" :props="props1" clearable
                    @change="handleChange" />
            </el-form-item>
            <el-form-item label="酒店类型：">
                <el-select v-model="form.HotelType" placeholder="请选择酒店类型" clearable>
                    <el-option v-for="item in hotelTypeList" :key="item.Id" :label="item.Value" :value="item.Id">
                    </el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="商户LOGO：">
                <el-upload class="upload-demo" drag
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" style="width:200px">
                    <div>图片上传</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="商户简介：">
                <el-input v-model="form.Introduction" style="width: 240px" :rows="5" type="textarea"
                    placeholder="Please input" />
            </el-form-item>
            <el-form-item label="自定义文案：" size="normal">
                <el-input v-model="form.Remark"> </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="default" @click="storeAdd">申请</el-button>
                <!-- <el-button type="default" size="default">返回</el-button> -->

            </el-form-item>
        </el-form>

    </el-card>
    <!-- 店铺信息显示 -->




</template>

<script setup lang="ts">
import { ElMessage } from "element-plus"
import { reactive, ref, onMounted } from "vue"
import router from '@/router';
import axios from 'axios';
import { session } from '@/stores/storageHelper.ts'
import { loginStore } from "@/stores/login";
import { baseURL_dev } from '@/config/baseURL'
const baseURL = baseURL_dev

const store = loginStore();

axios.defaults.baseURL = baseURL;
const form = reactive({
    //StoreId: 0,
    StoreName: "微盟酒店",
    Address: "天津/天津市/河北区",
    AddressArr: [],
    HotelType: "公寓式酒店",
    HotelLogo: "",
    Introduction: "打造最优质的服务",
    Remark: "价格优惠 服务周到",
    TenantId: "",
});
const props1 = {
    checkStrictly: false,
}
const handleChange = (value) => {
    console.log(value)
}
interface IOption {
    value: string,
    label: string,
    children: IOption[]
}
//级联选择器
const addressTreeList = reactive<IOption[]>([]);


function getProvinceAndCityList() {
    axios.get("Dic/GetCascaderList").then(res => {
        addressTreeList.value = res.data;
        console.log(addressTreeList.value)
    })
}
const hotelTypeList = ref([])
function getHotelTypeList() {
    axios.get("Dic/GetDicByIdentification?identification=HotelType").then(res => {
        hotelTypeList.value = res.data.Data;
        console.log(hotelTypeList)
    })
}
//店铺添加
function storeAdd() {
    form.Address = form.AddressArr.join('');
    form.TenantId = store.getUserInfo().TenantId;
    //let fromStoreList = session.get("fromStoreList");
    axios.post("Store/StoreAdd", form).then(res => {
        if (res.data.Code == 200) {
            ElMessage({
                message: '店铺申请成功',
                type: 'success',
            })

            router.push("/userLogin")



        } else {
            ElMessage({
                message: res.data.Msg,
                type: 'error',
            })

        }
    })
}

onMounted(() => {
    getHotelTypeList();
    getProvinceAndCityList()
})
</script>

<style scoped>
.p {
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center
}

.el-form-item {
    width: 400px;
}
</style>